<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    let productArr = [
        {title : '小米手机',price:5000 , num:100},
        {title : '华为手机',price:6000 , num:200},
        {title : '苹果手机',price:7000 , num:300},
        {title : '三星手机',price:8000 , num:400},
        {title : 'OPPO手机',price:9000 , num:500},
    ]
    let tableE = document.querySelector('table')
    for (let i = 0; i < productArr.length; i++) {

        let  trE = document.createElement('tr');
        let  titleTd =document.createElement('td');
        let priceTd =document.createElement('td');
        let  numTd =document.createElement('td');

        titleTd.innerHTML = productArr[i].title
        priceTd.innerHTML = productArr[i].price
        numTd.innerHTML = productArr[i].num

        trE.append(titleTd,priceTd,numTd);

        tableE.append(trE) ;
    }

</script>
</body>
</html>